<template>
  <!-- 自定义导航栏 -->
  <CustomNavbar />

  <uni-notice-bar
    show-icon
    scrollable
    text="品味鲜境，食途无界 —— 探索味蕾的旅行地图。"
  />

  <!-- 滚动容器 -->
  <scroll-view
    class="scroll-view"
    scroll-y
    enable-back-to-top
    lower-threshold="50"
    @scrolltolower="loadmore"
    @refresherrefresh="refresherrefresh"
    refresher-enabled
    :refresher-triggered="triggered"
    v-if="showIndexPage"
  >
    <StSwiper></StSwiper>
    <MapPannel />
    <RecommendPanel
      ref="recommend"
      :title="`附近推荐`"
      :icon="`navigate-filled`"
      :color="`#0000ff`"
    ></RecommendPanel>
    <HotPanel
      :title="`热门内容`"
      :icon="`fire-filled`"
      :color="`#ff0000`"
      ref="hot"
    ></HotPanel>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import CustomNavbar from "./components/CustomNavbar.vue";

import RecommendPanel from "./components/RecommendPanel.vue";

import HotPanel from "./components/HotPanel.vue";

import MapPannel from "./components/MapPannel.vue";
import { getLocationStorage, setStorage } from "@/utils/storage";
let showIndexPage = ref(false);
onMounted(() => {
  uni.getLocation({
    type: "wgs84",
    altitude: false,
    success: (result: any) => {
      console.log(result);
      setStorage("location", {
        latitude: result.latitude,
        longitude: result.longitude,
      });
      if (getLocationStorage()) {
        showIndexPage.value = true;
      }
    },
    fail: () => {
      setStorage("location", {
        latitude: 23.051959991455078,
        longitude: 112.48461151123047,
      });
      if (getLocationStorage()) {
        showIndexPage.value = true;
      }
    },
    complete: () => {},
  });
});
let hot = ref<any>();
let recommend = ref<any>();
const loadmore = () => {
  hot.value.loadMore();
};
let triggered = ref(false);
const refresherrefresh = async () => {
  triggered.value = true;
  await Promise.all([
    hot.value.resetData(),
    recommend.value.getRecommend(),
  ]).then(() => {
    triggered.value = false;
  });
};
</script>

<style>
.scroll-view {
  height: calc(100vh - var(--window-top));
}
</style>
